<template>
  <div id="promoterSales" class="promoterSales same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item>销售员管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/promoterSales' }">业绩管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
        </div>
      </div>
      <div class="same-search-box">
        <div>
          <div class="same-search-left">
            <div class="same-left-one">
              <span class="same-search-span">销售</span>
              <el-input size="medium" v-model="sale_name" placeholder="请输入销售名称/电话" style="width: 160px;"></el-input>
            </div>
            <div class="same-left-one">
              <span class="same-search-span">园区名称</span>
              <el-input size="medium" v-model="village_name" placeholder="请输入园区名称" style="width: 160px;"></el-input>
            </div>
            <div class="same-left-one">
              <span class="same-search-span">水卡卡号</span>
              <el-input size="medium" v-model="card_number" placeholder="请输入水卡卡号" style="width: 160px;"></el-input>
            </div>
            <div class="same-left-one">
              <span class="same-search-span same-search-fisrt">下单时间</span>
              <el-date-picker style="width:140px" v-model="start_time" type="date" size="medium"
                              value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>
              <div class="same-interval">至</div>
              <el-date-picker style="width:140px" v-model="end_time" type="date" size="medium" value-format="yyyy-MM-dd"
                              placeholder="结束时间"></el-date-picker>
            </div>
            <div class="same-left-one">
              <el-button type="primary" size="medium" @click="salesList()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
          <div class="same-search-right"></div>
        </div>
      </div>
    </div>

    <div class="statistic-wrapper">
      <div class="statistic-cell">
        <div class="money-wrapper">
          <p class="span-title">累计充值金额（元）</p>
          <span class="span-value">{{sum_money}}</span><!--{{income_money|filterNumber}}-->
        </div>
        <div class="money-wrapper">
          <p class="span-title">今日充值金额（元）</p>
          <span class="span-value">{{today_money}}</span>
        </div>
        <img class="sales_icon" src="../../../static/images/sales_icon.png">
      </div>

      <div class="statistic-cell">
        <div class="money-wrapper">
          <p class="span-title">累计赠送金额（元）</p>
          <span class="span-value">{{give_money}}</span>
        </div>
        <div class="money-wrapper">
          <p class="span-title">今日赠送金额（元）</p>
          <span class="span-value">{{today_give_money}}</span>
        </div>
        <img class="sales_icon" src="../../../static/images/sales_icon.png">
      </div>

      <div class="statistic-cell">
        <div class="money-wrapper">
          <p class="span-title">累计开卡数（张）</p>
          <span class="span-value">{{sum_card}}</span>
        </div>
        <div class="money-wrapper">
          <p class="span-title">今日开卡数（张）</p>
          <span class="span-value">{{today_sum_card}}</span>
        </div>
        <img class="sales_icon" src="../../../static/images/sales_icon.png">
      </div>
    </div>

    <div class="head_box same-table-box">

      <div class="table_box">
        <h4 class="same-title-box">
          我的业绩 充值：{{recharge_money}}元，赠送：{{give_where_money}}元
        </h4>
        <div class="common-table-outer">
          <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
                    :data="tableData" stripe>
            <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>
            <el-table-column align="center" width="70" prop="id" label="ID">
            </el-table-column>
            <el-table-column align="center" prop="sale_order" label="订单编号">
            </el-table-column>
            <el-table-column align="center" prop="address" label="销售">
              <template slot-scope="scope">
                <p>{{scope.row.full_name}}</p><span>{{scope.row.tel}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="village_name" show-overflow-tooltip align="center" label="园区名称">
            </el-table-column>
            <el-table-column align="center" prop="card_number" label="水卡卡号">
            </el-table-column>
            <el-table-column align="center" prop="address" label="充值金额">
              <template slot-scope="scope">
                <span :class="scope.row.pay_money<=0?'redColor':''">{{scope.row.pay_money|filterNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="水卡金额">
              <template slot-scope="scope">
                <span :class="scope.row.balance<=0?'redColor':''">{{scope.row.balance|filterNumber}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="支付状态">
              <template slot-scope="scope">
                <span :class="'blueColor'" v-if="scope.row.pay_status == 1">已支付</span>
                <span :class="'redColor'"  v-else-if="scope.row.pay_status == 2">未支付</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="create_time" label="下单时间">
            </el-table-column>
            <template slot="empty" v-if="isLoad">
              <div class="new-no-data-show">
                <img src="../../assets/images/no-data.png" alt="">
                <div>暂无相关数据</div>
              </div>
            </template>
          </el-table>
          <div class="same-page-inShow" v-if="tableData.length>0 && isLoad">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
                           layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "promoterSales",
      data: function () {
        return {
          loading: false, //加载动画
          isLoad: false,
          pageNo: 1,
          pageSize: 15,
          pageSizesList: [15, 30, 40, 50],
          tableData: [], // 返回的结果集合
          totalDataNumber: 0, // 数据的总数,-----

          sale_name: '',
          village_name: '',
          card_number: '',
          start_time: '',
          end_time: '',
          sum_money: '',
          today_money: '',
          give_money: '',
          today_give_money: '',
          sum_card: '',
          today_sum_card: '',
          give_where_money: "",
          recharge_money: ""
        }
      },
      created: function () {
          this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
          this.loading = true; //打开loading动画
          this.isLoad = false; //是否加载
          var that = this;
          // ajax请求
          that.$post({
              url: 'Partner/WaterCard/salesmanStatistics',
              data: {
                  page: that.pageNo,
                  row: that.pageSize,
                  start_time: that.start_time ? that.start_time : '',
                  end_time: that.end_time ? that.end_time : '',
                  sale_name: that.sale_name,
                  village_name: that.village_name,
                  card_number: that.card_number,
              },
              success: (data) => {
                  that.isLoad = true;
                  that.loading = false; //关闭动画
                  if (data.code == 1000) {
                      that.tableData = data.data.data;
                      that.totalDataNumber = Number(data.data.page.total_number); // 总的数据条数
                      that.sum_money = Number(data.data.sum_data.sum_money); // 总的数据
                      that.today_money = Number(data.data.sum_data.today_money); // 总的数据
                      that.give_money = Number(data.data.sum_data.give_money); // 总的数据
                      that.today_give_money = Number(data.data.sum_data.today_give_money); // 总的数据
                      that.sum_card = Number(data.data.sum_data.sum_card); // 总的数据
                      that.today_sum_card = Number(data.data.sum_data.today_sum_card); // 总的数据
                      that.give_where_money= Number(data.data.sum_data.give_where_money);
                      that.recharge_money= Number(data.data.sum_data.recharge_money);
                  }
              }
          })
      },
      inject: [
        'reload'
      ],
      methods: {
        RefreshFun() {
          // 调用reload方法，刷新整个页面
          this.reload()
        },

        //重置搜索
        reset() {
          this.sale_name = '';
          this.village_name = '';
          this.card_number = '';
          this.start_time = '';
          this.end_time = '';
          this.pageNo = 1;
          this.salesList(this.pageNo, this.pageSize);
        },
        // 搜索事件
        serach() {
          var that = this;
          that.pageNo = 1; // 当前页
          that.salesList(that.pageNo, that.pageSize); // 获取设备列表数据
        },

        // 获取销售员业绩
        salesList() {
          this.loading = true; //打开loading动画
          this.isLoad = false; //是否加载
          var that = this;
          // ajax请求
          that.$post({
            url: 'Partner/WaterCard/salesmanStatistics',
            data: {
              page: that.pageNo,
              row: that.pageSize,
              start_time: that.start_time ? that.start_time : '',
              end_time: that.end_time ? that.end_time : '',
              sale_name: that.sale_name,
              village_name: that.village_name,
              card_number: that.card_number,
            },
            success: (data) => {
              that.isLoad = true;
              that.loading = false; //关闭动画
              if (data.code == 1000) {
                that.tableData = data.data.data;
                that.totalDataNumber = Number(data.data.page.total_number); // 总的数据条数
                that.sum_money = Number(data.data.sum_data.sum_money); // 总的数据
                that.today_money = Number(data.data.sum_data.today_money); // 总的数据
                that.give_money = Number(data.data.sum_data.give_money); // 总的数据
                that.today_give_money = Number(data.data.sum_data.today_give_money); // 总的数据
                that.sum_card = Number(data.data.sum_data.sum_card); // 总的数据
                that.today_sum_card = Number(data.data.sum_data.today_sum_card); // 总的数据
              }
            }
          })
        },
        // 每页
        handleSizeChange(val) {
          var that = this;
          that.pageNo = 1;
          that.pageSize = val; // 当前每页显示条数
          that.salesList(); // 获取销售员业绩
        },
        // 分页
        handleCurrentChange(val) {
          var that = this;
          that.pageNo = val;
          that.salesList(); // 获取销售员业绩
        },
      },
    }
</script>

<style scoped>
  #promoterSales {
    width: 100%;
    height: 100%;
    background: #fff;
  }

  #promoterSales .el-range-editor.el-input__inner input {
    height: auto;
  }

  /* 头部搜索 */

  #promoterSales .head_box {
    display: flex;
    flex-direction: column;
  }

  .jump_btn_style {
    border: none;
    width: 80px;
    height: 30px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    background: #275485;
    margin-left: 10px;
    border-radius: 4px;
  }

  /*统计*/

  #promoterSales .data_tj {
    display: flex;
    flex-direction: column;
  }

  #promoterSales .table_box .same-title-box {
    padding-top: 10px;
  }

  #promoterSales .dataBoxList {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100px;
  }

  #promoterSales .boxs_one {
    width: 32%;
    height: 100px;
    display: flex;
    height: 100px;
    border: 1px solid #DCDBD9;
    border-radius: 4px;
  }

  #promoterSales .lefts_data {
    width: 30%;
    height: 100%;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #promoterSales .gl_color {
    background: #8F3E92;
    border: 1px solid #8F3E92;
  }

  #promoterSales .bl_color {
    background: #275485;
    border: 1px solid #275485;
  }

  #promoterSales .gr_color {
    background: #16903B;
    border: 1px solid #16903B;
  }

  #promoterSales .right_data {
    padding: 0px 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  #promoterSales .span_st {
    color: #636261;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
  }

  #promoterSales .p_st {
    color: #999999;
  }


  #promoterSales .redColor {
    color: #FF6565;
  }

  #promoterSales .greed_show {
    color: #399544;
  }

  #promoterSales .blueColor{
    color: #2c5586;
  }

  #promoterSales .paginShow {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
  }


  #promoterSales .noneshow {
    padding: 20px 0px;
    background: #fff;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #promoterSales .statistic-wrapper {
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 35px 20px;
  }

  #promoterSales .statistic-cell {
    background-color: #2C5586;
    color: #fff;
    flex: 1;
    margin-right: 20px;
    border-radius: 6px;
    height: 140px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  #promoterSales .money-wrapper{
    width: 50%;
    height: 85%;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #promoterSales .money-wrapper:first-child{
    border-right: 1px dashed rgba(255,255,255,0.5);
  }

  #promoterSales .span-title {
    color: #FFFFFF;
    opacity: 0.5;
    font-size: 14px;
  }

  #promoterSales .span-value {
    font-size: 30px;
    margin-top: 5px;
  }

  #promoterSales .sales_icon{
    position: absolute;
    bottom: -5px;
    right: -5px;
    height: 115px;
  }
</style>
